<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link
            rel="stylesheet"
            href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
    />
    <!-- 导入 Vue 3 -->
    <script src="//cdn.jsdelivr.net/npm/vue@next"></script>
    <!-- 导入组件库 -->
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
</head>
<body style="height: 100%">
<div id="app"  style="height: 100%">
    <el-container style="height: 100%;padding-bottom:0;margin-left:100px;margin-right:100px; border: 1px solid #eee">

        <el-header  style="margin-left:100px;margin-right:100px;height: 100px">
            <div style=" background-color: #d3dce6;height: 100%;text-align: center ;">
                <div  style=" padding: 30px 0;height: 40px; font-size: 24px">
                接口信息展示
                </div>

            </div>

        </el-header>
        <el-main style="margin-left:100px;margin-right:100px;text-align: center ;height: 70%">
            <el-scrollbar>
                <el-table :data="set.apiInfos"  border  >
                    <el-table-column prop="name" label="接口名称" >
                    </el-table-column>
                    <el-table-column prop="requestMethods" label="请求方法">
                        <template #default="scope">

                            <el-tag  v-for ="type in scope.row.requestMethods"
                            >{{type }}</el-tag>
                        </template>

                    </el-table-column>
                    <el-table-column prop="path" label="路径"> </el-table-column>
                    <el-table-column prop="version" label="版本"> </el-table-column>
                </el-table>
            </el-scrollbar>
        </el-main>
        <el-footer   style="margin-left:100px;margin-right:100px;height: 30%">
            <el-scrollbar>

                <el-card >
                    <template #header>
                        <div class="card-header">
                            <span>接口发现配置</span>
                        </div>
                    </template>
                    <div><b>版本发现正则表达式：</b>{{set.versionMatch}}</div>
                    <div><b>排除接口配置 ：</b><li v-for="v in set.exclude">{{v}} </li></div>
                    <div><b>指定接口配置 ：</b>
                        <span v-if="set.exclude">无</span>
                        <li v-for="v in set.only">{{v}} </li>
                    </div>
                </el-card>
            </el-scrollbar>


        </el-footer>
    </el-container>



</div>
    <script>
        const App = {
        data() {
            return {
                bnt: "获取接口信息",
                // tableData:[],
                set:{}
            }
        },
        created ()
        {
            this.send();
        }
        , methods:
            {
                send(){
                    const that = this;
                    axios.get('/test/api/list').then(function(res){
                        console.log(res.data);
                        that.set=res.data;

                    }).catch(function (error) {
                        console.log(error);
                    });
            }
            }
    };
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
</script>

</body>
<script>

    const Counter = {
        data() {
            return {
                counter: 0
            }
        },


    }

    Vue.createApp(Counter).mount('#counter')
</script>
</html>